<template>
  <div class="flower">
    <div class="search">
      <el-input
        placeholder="请输入内容"
        v-model="input1"
        class="input-with-select"
      >
        <el-select
          style="width: 100px"
          v-model="select1"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in typeData"
            :key="item.id"
          ></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <!-- 图书列表部分 -->
    <div class="book-box">
      <el-row>
        <el-col v-for="book in bookList" :key="book.id" :span="4">
          <div class="book-list">  <Card :dataList="bookList"></Card></div>
        
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- <Footer></Footer> -->
    </div>
  </div>
</template>

<script>
import Card from "@/components/view/card.vue";
export default {
  props: {},
  data() {
    return {
      name: "",
      objName: "",
      bookList: [],
      booksData:[],
      userInfo: localStorage.getItem("CurUser")
        ? JSON.parse(localStorage.getItem("CurUser"))
        : {},

      // 分页
      // current-page 当前页数
      // currentPage:0,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      typeData:[],
      select1: "",
      input1: "",
      type: [],
    };
  },
  components: {
    Card,
  },
  watch: {},
  computed: {},
  methods: {

    loadType(){
      this.$axios.get(this.$httpUrl+'/type/list').then(res=>res.data).then(res=>{
        console.log(res)
        if (res.code==200){
          this.typeData=res.data
        }else ('获取数据失败')

      })
    },
    // 页面初始化
    load() {
      // this.request.get("/flower").then((res) => {
      // this.flowerList = res.data.data;

      // });
      // this.request.get("/flower/page",{

      //   params: {
      //   pageNum:this.pageNum,
      //   pageSize:this.pageSize,
      //   fname:this.name,
      //   obj:this.objName
      //   }
      // }).then((res) =>{
      //   console.log(res)
      //   console.log(res.data.data)
      //   this.flowerList = res.data.data.records;
      //   this.total = res.data.data.total
      // })

      // 设置类型
      // this.type = [
      //   {
      //     id: "1",
      //     name: "小说",
      //   },
      //   {
      //     id: "2",
      //     name: "经济",
      //   },
      //   {
      //     id: "3",
      //     name: "教育",
      //   },
      //   {
      //     id: "4",
      //     name: "文学",
      //   },
      //   {
      //     id: "5",
      //     name: "历史",
      //   },
      //   {
      //     id: "6",
      //     name: "政治",
      //   },
      //   {
      //     id: "7",
      //     name: "法律",
      //   },
      //   {
      //     id: "8",
      //     name: "心理",
      //   },
      // ];
      // 图书列表的值
      for (let index = 0; index < 10; index++) {
        this.bookList.push({ id: "1", bookname: "" });
      }
    },
    // 搜索按钮
    search() {
      this.load();
    },

    // 重置按钮
    clear() {
      this.name = "";
      this.objName = "";
      this.load();
    },
    // 每页显示个数改变时触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 当前页码改变时触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 点击收藏
    sc() {
      this.request
        .post("/sc", {
          name: this.name,
          descs: this.descs,
          price: this.price,
          uid: this.userInfo.id,
          url: this.url,
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.$message.success("您已经成功收藏啦！");
          }
        });
    },
    // 点击购买图标
    buy(item) {
      // 存一下这个商品的数据
      // 把值带去flowerDetail页面
      // 第一种方法：$bus
      // 提供数据
      // this.$bus.$emit('h',item)

      // 第二种方法$router
      // this.$router.push({path:'/flowerDetail',query:item})

      // 第三种方法：vuex
      this.$store.commit("update", item);
      console.log(item);
      this.$router.push("/flowerDetail");
    },
  },
  created() {
    this.loadType();
    // 页面初始化
    this.load();

  },
  mounted() {
    //   this.request.get("/flower",{
    //     params: {
    //         pageNum: this.pageNum,
    //         pageSize: this.pageSize,
    //         fname:this.typename,
    //         obj:this.typeobj
    //       }
    //   }).then(res => {
    //     console.log(res)
    //   },error =>{
    //     console.log(error)
    //   })
    console.log(this.userInfo);
  },
};
</script>
<style lang="less" scoped>
.flower {
  // display: flex;
  // flex-direction: column;
  // justify-items: end;
  position: relative;

  .search {
    // float: right;
    position: absolute;
    right: 20px;
    // // 搜索框
    // .el-input {
    //   width: 30%;
    //   margin: 20px 15px;
    // }
    .el-select .el-input {
      width: 30px;
    }
    .input-with-select {
      width: 400px;
    }
  }
  // 鲜花列表
  .flowerlist {
    // float: left;
    .el-row {
      width: 240px;
      // height: 200px;

      .card {
        // float: left;
        display: grid;
        margin: 90px 70px;
        /*  声明列的宽度  */
        grid-template-columns: repeat(5, 230px);
        /*  声明行间距和列间距  */
        grid-gap: 40px;
        /*  声明行的高度  */
        grid-template-rows: 300px;

        .imge {
          width: 200px;
          height: 200px;
          margin: 15px 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .bottom {
          // height: 30px;
          float: right;
        }
        .desc {
          // display: inline-block;
          width: 200px;
          margin-top: 20px;
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .block {
    float: right;
    padding-right: 60px;
  }

  .book-box {
    padding-top: 50px;
  }
  .book-list {
    padding: 10px;
  }
}
</style>
